<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery垂直手风琴菜单列表代码 - 站长素材</title>

<!--可无视-->
<link rel="stylesheet" type="text/css" href="css/default.css">

<!--必要样式-->
<link rel="stylesheet" href="css/style.css">

</head>
<body>


<ul class="mainmenu">
	<li>
		<img src="images/user.png" alt="User icon" class="icon" />
		<span>Account</span>
	</li>
	<ul class="submenu">
		<div class="expand-triangle"></div>
		<li><span>Basics</span></li>
		<li><span>Picture</span></li>
		<li><span>Go Premium</span></li>
	</ul>
	<li>
		<img src="images/envelope.png" alt="Envelope icon" class="icon">
		<span>Messages</span>
		<div class="messages">23</div>
	</li>
	<ul class="submenu">
		<div class="expand-triangle"></div>
		<li><span>New</span></li>
		<li><span>Sent</span></li>
		<li><span>Trash</span></li>
	</ul>
	<li>
		<img src="images/cog.png" alt="Cog icon" class="icon">
		<span>Settings</span>
	</li>
	<ul class="submenu">
		<div class="expand-triangle"></div>
		<li><span>Language</span></li>
		<li><span>Password</span></li>
		<li><span>Notifications</span></li>
		<li><span>Privacy</span></li>
		<li><span>Payments</span></li>
	</ul>
	<li><img src="images/key.png" alt="Key icon" class="icon"><span>Logout</span></li>
</ul>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>